<template>
    <div>
        <navigationBar :backType="2" navigationTitle="下单" />

        <view class="wrap paddingBottom" v-if="dataInfo">
            <view class="address-bg flex align-center just-between">
                <image
                    class="address-img"
                    :src="getImageURL('technician/home/confirm_address.png')"
                />

                <view class="address-info" @click="onChooseAddress">
                    <block v-if="dataInfo.address && dataInfo.address.name">
                        <view class="nickname-mobile flex align-base">
                            <view class="nickname fb-30">
                                {{ dataInfo.address.name }}
                            </view>

                            <view class="mobile f-26">
                                {{ dataInfo.address.mobile }}
                            </view>
                        </view>

                        <view class="address f-26 limit-num-line">
                            {{ dataInfo.address.address }}
                            {{ dataInfo.address.street_name }}
                            {{ dataInfo.address.community_name }}
                            {{ dataInfo.address.area }}
                        </view>
                    </block>

                    <block v-else>
                        <text class="no-address fb-30"> 请选择你的地址 </text>
                    </block>
                </view>

                <image class="arrow" :src="getImageURL('common/arrow.png')" />
            </view>

            <view class="wrap-time-travel">
                <view
                    class="wrap-item flex align-center just-between"
                    @click="onChooseTime"
                >
                    <view class="left fb-30"> 服务时间 </view>

                    <view class="value flex align-center just-end">
                        <view class="time f-26">
                            {{
                                subscribe_time_total === ""
                                    ? "请选择时间"
                                    : subscribe_time_total
                            }}
                        </view>

                        <image
                            class="arrow"
                            :src="getImageURL('common/arrow.png')"
                        />
                    </view>
                </view>

                <view
                    class="wrap-item flex align-center just-between"
                    v-if="false"
                >
                    <view class="left fb-30"> 出行方式 </view>

                    <view class="value flex align-center just-end">
                        <block
                            v-for="(item, index) in travel_list"
                            :key="index"
                        >
                            <view
                                class="travel-item flex align-center"
                                @click="onChooseTravel(index)"
                            >
                                <image
                                    v-if="item.select"
                                    :src="
                                        getImageURL('common/choose_select.png')
                                    "
                                />
                                <image
                                    v-else
                                    :src="getImageURL('common/pay_normal.png')"
                                />

                                <view
                                    class="f-26"
                                    :class="{ active: item.select }"
                                >
                                    {{ item.title }}
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>

            <view class="wrap-goods-info flex align-center">
                <image class="file" :src="dataInfo.service.image" />

                <view class="info-right">
                    <view class="title fb-30 limit-num-line">
                        {{ dataInfo.service.name }}
                    </view>

                    <view class="price-time">
                        <text class="price f-32">
                            ¥{{ dataInfo.service.price }}
                        </text>
                        <text class="time f-24">
                            /{{ dataInfo.service.duration_time }}分钟
                        </text>
                    </view>

                    <view class="bottom flex align-center just-between">
                        <view class="peoples f-24">
                            服务人员：{{ dataInfo.technician.name }}
                        </view>

                        <view class="num-bg flex align-center">
                            <view
                                class="sub flex align-center just-center"
                                @click="onNumChange('sub')"
                            >
                                <image
                                    :src="
                                        getImageURL(
                                            'technician/home/confirm_num_sub.png'
                                        )
                                    "
                                />
                            </view>

                            <view class="num f-24">
                                {{ num }}
                            </view>

                            <view
                                class="add flex align-center just-center"
                                @click="onNumChange('add')"
                            >
                                <image
                                    :src="
                                        getImageURL(
                                            'technician/home/confirm_num_add.png'
                                        )
                                    "
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view
                class="wrap-discount"
                v-if="travel_type === '1' && dataInfo.pare"
            >
                <view class="wrap-item flex align-center just-between">
                    <view class="left fb-30"> 卡券优惠 </view>
                    <view
                        class="price flex align-center f-26"
                        @click="selectCoupon"
                    >
                        <text class="couponText">{{
                            selectCouponIt
                                ? selectCouponIt.type == 1
                                    ? "无门槛"
                                    : "满 " +
                                      selectCouponIt.limit_money +
                                      " 减 " +
                                      selectCouponIt.money
                                : dataInfo.coupon_num + " 张可用"
                        }}</text>
                        <image
                            class="arrow"
                            src="/static/static/common/arrow.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>

                <view class="car-scrip">
                    <view class="car-price flex align-center just-between">
                        <view class="left fb-30"> 往返车费 </view>
                        <view class="price f-26">
                            ¥{{ dataInfo.total.car_price }}
                        </view>
                    </view>

                    <view class="scrip f-24">
                        全程共计{{ dataInfo.pare.distance }}km， 出租出行{{
                            dataInfo.pare.start_distance
                        }}公里内， 起步{{ dataInfo.pare.start_money }}元，
                        里程计价{{ dataInfo.pare.mileage_price }}/公里
                    </view>
                </view>

                <view
                    class="wrap-item flex align-center just-between"
                    v-if="false"
                >
                    <view class="left fb-30"> 物料费 </view>
                    <view class="price f-26"> ¥{{ dataInfo.material }} </view>
                </view>
            </view>

            <view class="wrap-remarks">
                <view class="flex align-base">
                    <text class="remarks-title fb-30"> 订单备注 </text>
                    <text class="remarks-tips f-24"> (选填) </text>
                </view>

                <view class="remarks-input-bg">
                    <textarea class="f-30" maxlength="20" v-model="remarks" />
                    <view class="remarks-input-limit f-24">
                        {{ remarks.length }}/20
                    </view>
                </view>
            </view>

            <view class="wrap-pay-methods">
                <payMethods :showMethods="1" :status.sync="payStatus" />
            </view>
        </view>

        <view
            class="footer safe-area flex align-center just-between"
            v-if="dataInfo"
        >
            <view class="total-price fb-30 flex align-center">
                <text class="total"> 合计： </text>
                <text class="price">
                    {{ dataInfo.total.total_price }}
                </text>
            </view>
            <view class="pay-btn f-30" @click="onPay"> 立即支付 </view>
        </view>

        <view class="mark" v-if="showSelectCoupon" @click="selectCouponClose">
        </view>
        <view class="card" v-if="showSelectCoupon && dataInfo">
            <view class="top flex align-center just-between">
                <view></view>
                <view class="card-title"> 优惠券 </view>
                <image
                    @click="selectCouponClose"
                    class="close"
                    src="/static/static/technician/joinUs/closeBlack.png"
                    mode="scaleToFill"
                />
            </view>
            <view class="content">
                <view
                    class="items flex align-center"
                    v-for="(item, index) in dataInfo.coupon"
                    :key="index"
                >
                    <view class="left">
                        <view class="price"> {{ item.money }} </view>
                    </view>
                    <view class="center flex column just-between">
                        <view class="title"> {{ item.name }} </view>
                        <view class="sub">
                            {{
                                item.type == 1
                                    ? "无门槛"
                                    : "满 " +
                                      item.limit_money +
                                      " 减 " +
                                      item.money
                            }}
                        </view>
                        <view class="time"> 有效期至 {{ item.overdue }} </view>
                    </view>
                    <view
                        class="right flex align-center column"
                        @click="onReceive(item)"
                    >
                        <view class="btn"> 立即 </view>
                        <view class="btn"> 使用 </view>
                    </view>
                </view>
            </view>
        </view>

        <appointmentTime
            :isShow.sync="isShowTime"
            :technicianID="technicianID"
            :serviceID="serviceID"
            :num="num"
            @selectTime="onSelectTime"
        />
    </div>
</template>

<script>
import { getConfirmOrder, createOrder } from "@/API/API/technician.js";
import payMethods from "@/subPages/components/payMethods/payMethods.vue";
import appointmentTime from "@/subPages/components/appointmentTime/appointmentTime.vue";
export default {
    components: {
        payMethods,
        appointmentTime,
    },
    data() {
        return {
            serviceID: "", //服务ID
            technicianID: "", //技师ID
            address_id: "", //地址ID
            travel_type: "1", //出行方式 1:出租车 2:地铁/公交
            num: 1, //服务数量
            subscribe_time: "", //预约时间
            subscribe_time_total: "", //预约时间总数
            travel_list: [
                { title: "出租车", select: true, type: "1" },
                { title: "公交/地铁", select: false, type: "2" },
            ], //出行方式列表

            remarks: "", //备注
            payStatus: "", //支付方式

            dataInfo: null, //订单信息

            isShowTime: false, //是否显示时间选择

            selectCouponIt: "",
            selectCouponId: 0,
            showSelectCoupon: false,
        };
    },
    onLoad(options) {
        this.serviceID = options.serviceID;
        this.technicianID = options.technicianID;
        this.num = Number(options.num) || 1;
        this.getData();
    },
    onReady() {
        uni.$on("changeAddress", (address) => {
            this.address_id = address.id;
            this.getData();
        });
        uni.$on("defaultAddressDelete", () => {
            this.address_id = "";
            this.getData();
        });
    },
    onUnload() {
        uni.$off("changeAddress");
        uni.$off("defaultAddressDelete");
    },
    watch: {
        num() {},
    },
    methods: {
        selectCoupon() {
            if (!this.dataInfo.coupon_num) {
                uni.showToast({
                    title: "暂无可用优惠券",
                    icon: "none",
                });
                return;
            }
            this.showSelectCoupon = true;
        },
        onReceive(item) {
            this.selectCouponIt = item;
            this.selectCouponId = item.id;
            this.showSelectCoupon = false;
            this.getData();
        },
        selectCouponClose() {
            this.showSelectCoupon = false;
        },
        /**
         * 切换地址
         */
        onChooseAddress() {
            let address_id = this.address_id;
            if (this.dataInfo.address && this.dataInfo.address.id) {
                address_id = this.dataInfo.address.id;
            }
            uni.navigateTo({
                url: `/subPages/technician/mine/addressList?from=order&address_id=${address_id}`,
            });
        },
        /**
         * 选择预约时间
         */
        onChooseTime() {
            this.isShowTime = true;
        },
        /**
         * 选择出行方式
         */
        onChooseTravel(index) {
            this.travel_list.forEach((item, i) => {
                item.select = i === index;
            });
            this.travel_type = this.travel_list[index].type;
            this.getData();
        },
        /**
         * 数量修改
         */
        onNumChange(type) {
            if (type === "sub") {
                if (this.num > 1) {
                    this.num--;
                    this.getData();
                }
            } else if (type === "add") {
                this.num++;
                this.getData();
            }
        },
        onSelectTime(info) {
            this.subscribe_time = info.time;
            this.subscribe_time_total = info.total;
            this.getData();
        },
        /**
         * 立即支付
         */
        onPay() {
            if (this.dataInfo.address === null) {
                this.$st.show("请选择地址");
                return;
            }
            if (this.subscribe_time_total === "") {
                this.$st.show("请选择预约时间");
                return;
            }
            createOrder({
                service_id: this.serviceID,
                technician_id: this.technicianID,
                address_id: this.dataInfo.address.id,
                travel_type: this.travel_type,
                num: this.num,
                subscribe_time: this.subscribe_time,
                remarks: this.remarks,
                pay_type: this.payStatus,
                pay_method: this.$filters.getPlatform(),
                coupon_id: this.selectCouponId,
            })
                .then((res) => {
                    if (this.payStatus == 1) {
                        //微信支付
                        this.$filters.onWeixinPay(res, (type) => {
                            this.paySuccessNext();
                        });
                    } else if (this.payStatus == 2) {
                        //余额支付 直接支付成功
                        this.paySuccessNext();
                    }
                })
                .catch((err) => {
                    uni.showToast({ title: err.msg, icon: "none" });
                });
        },
        //支付成功之后跳转
        paySuccessNext() {
            uni.redirectTo({
                url: `/subPages/technician/home/payFinish`,
            });
        },
        /**
         * 网络请求
         */
        getData() {
            getConfirmOrder({
                service_id: this.serviceID,
                technician_id: this.technicianID,
                address_id: this.address_id,
                travel_type: this.travel_type,
                num: this.num,
                subscribe_time: this.subscribe_time,
                coupon_id: this.selectCouponId,
            }).then((res) => {
                const model = res.data;
                // for (let i = 0; i < 5; i++) {
                //     res.data.coupon.push(...res.data.coupon);
                // }
                this.dataInfo = model;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    --bottom-height: 140rpx;
    padding: 20rpx;
    box-sizing: border-box;

    .left {
        color: $title-color;
    }

    > view {
        width: 100%;
        background-color: white;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 0 30rpx;
        box-sizing: border-box;

        .wrap-item {
            width: 100%;
            height: 90rpx;
            border-bottom: 2rpx solid #ececec;

            &:last-child {
                border-bottom: none;
            }

            .value {
                width: 500rpx;
                height: 60rpx;
                flex-wrap: wrap;

                .time {
                    margin-right: 20rpx;
                    color: #999999;
                }

                .travel-item {
                    margin-right: 30rpx;

                    &:last-child {
                        margin-right: 0;
                    }

                    > image {
                        width: 26rpx;
                        height: 26rpx;
                    }
                    > view {
                        margin-left: 8rpx;
                        color: #333333;
                    }
                }
            }
        }
    }

    .address-bg {
        height: 124rpx;

        .address-img {
            width: 64rpx;
            height: 64rpx;
        }

        .address-info {
            margin-left: 18rpx;
            flex: 1;
            margin-right: 20rpx;
            overflow: hidden;

            .nickname-mobile {
                width: 100%;
                overflow: hidden;

                .nickname {
                    color: $title-color;
                }
                .mobile {
                    margin-left: 16rpx;
                    color: #999999;
                }
            }

            .address {
                margin-top: 8rpx;
                --limit-num: 1;
                color: $title-color;
            }

            .no-address {
                color: $title-color;
            }
        }
    }
    .price {
        color: $price-color;
    }

    .wrap-time-travel {
        margin-top: 20rpx;
    }

    .wrap-discount {
        margin-top: 20rpx;

        .car-scrip {
            border-bottom: 2rpx solid #ececec !important;
            padding: 30rpx 0;
            width: 100%;
            overflow: hidden;
        }
        .car-price {
            width: 100%;
            overflow: hidden;
        }
        .scrip {
            margin-top: 20rpx;
            color: #999999;
            line-height: 1.4em;
        }
    }

    .wrap-remarks {
        padding: 30rpx;
        margin-top: 20rpx;

        .remarks-title {
            color: $title-color;
        }

        .remarks-tips {
            margin-left: 15rpx;
            color: #999999;
        }

        .remarks-input-bg {
            margin-top: 20rpx;
            width: 100%;
            height: 240rpx;
            background-color: #f7f8fa;
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;
            z-index: 1;
            padding: 20rpx;
            box-sizing: border-box;

            textarea {
                width: 100%;
                height: 100%;
                color: $title-color;
            }

            .remarks-input-limit {
                position: absolute;
                right: 20rpx;
                bottom: 20rpx;
                color: #999999;
                z-index: 2;
            }
        }
    }

    .wrap-goods-info {
        margin-top: 20rpx;
        padding: 30rpx;

        .file {
            width: 140rpx;
            height: 140rpx;
            border-radius: 18rpx;
            overflow: hidden;
        }
        .info-right {
            --limit-num: 1;
            margin-left: 20rpx;
            flex: 1;
            overflow: hidden;

            .title {
                color: #010101;
            }
            .bottom {
                margin-top: 20rpx;
                width: 100%;
                overflow: hidden;

                .peoples {
                    color: #999999;
                }

                .num-bg {
                    overflow: hidden;
                    > view {
                        height: 38rpx;
                        line-height: 38rpx;
                        text-align: center;
                        overflow: hidden;
                    }
                    .sub {
                        width: 38rpx;
                        border-radius: 20rpx;
                        border: 2rpx solid $theme-color;
                        > image {
                            width: 16rpx;
                            height: 2rpx;
                        }
                    }

                    .num {
                        width: 54rpx;
                        color: $title-color;
                    }

                    .add {
                        width: 38rpx;
                        background-color: $theme-color;
                        border-radius: 20rpx;

                        > image {
                            width: 16rpx;
                            height: 16rpx;
                        }
                    }
                }
            }

            .price-time {
                margin-top: 20rpx;
                width: 100%;

                .price {
                    color: $price-color;
                }
                .time {
                    margin-left: 9rpx;
                    color: #999999;
                }
            }
        }
    }

    .wrap-pay-methods {
        margin-top: 20rpx;
    }
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 128rpx;
    z-index: 10;
    background-color: #fff;

    .total-price {
        margin-left: 48rpx;
        flex: 1;
        margin-right: 20rpx;
        overflow: hidden;

        .total {
            color: $title-color;
            margin-right: 10rpx;
        }
        .price {
            color: $price-color;
        }
    }
    .pay-btn {
        width: 186rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: $grad-theme-color;
        color: $bg-text-color;
        margin-right: 22rpx;
        border-radius: 40rpx;
        overflow: hidden;
    }
}
.couponText {
    margin-right: 10rpx;
}
.arrow {
    width: 12rpx;
    height: 24rpx;
}

.mark {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
}

.card {
    width: 100%;
    height: 50vh;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background: #f6f6f6;
    padding: 30rpx 24rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);

    .top {
        margin-bottom: 20rpx;
        .close {
            width: 34rpx;
            height: 34rpx;
        }
    }
}
.content {
    width: 100%;
    height: calc(50vh - 90rpx);
    overflow-y: auto;
}
.items {
    width: 95%;
    height: 152rpx;
    background: url("../../../static/static/technician/joinUs/coupon.png") no-repeat;
    background-size: 100% 152rpx;
    margin-bottom: 20rpx;
    margin: 20rpx auto;

    .left {
        width: 24%;
        font-size: 52rpx;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: #e13221;
    }
    .left::before {
        content: "¥";
        font-size: 28rpx;
    }
    .center {
        flex: 1;
        margin-left: 6rpx;
        .title {
            color: #e13221;
            font-size: 30rpx;
            font-weight: bold;
        }
        .sub {
            width: max-content;
            height: 36rpx;
            line-height: 36rpx;
            font-size: 24rpx;
            margin: 10rpx 0;
            background: #f87918;
            border-radius: 6rpx;
            color: white;
            padding: 0 15rpx;
            box-sizing: border-box;
        }
        .time {
            font-size: 20rpx;
            color: #999;
        }
    }
    .right {
        width: 22%;
        font-size: 30rpx;
        color: #e13221;
        .btn {
            margin: 10rpx 0;
            font-weight: bold;
        }
    }
}
</style>
